<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
            <el-form-item label="名称" prop="name"
                :rules="[
                  {required: true, message:'名称不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.name" placeholder="请填写名称"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="父级编号" prop="parent.id"
                :rules="[
                 ]">
           			<SelectTree
                      ref="parent"
                      :props="{
                          value: 'id',             // ID字段名
                          label: 'name',         // 显示名称
                          children: 'childNodes'    // 子级字段名
                        }"
                      v-if="visible"
                      :url="`/smis/floor/jfBuilding/treeData?extId=${inputForm.id}`"
                      :value="inputForm.parent.id"
                      :clearable="true"
                      :accordion="true"
                      @getValue="(value) => {inputForm.parent.id=value}"/>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="排序" prop="sort"
                :rules="[
                  {required: true, message:'排序不能为空', trigger:'blur'},
                  {validator: validator.isNumber, trigger:'blur'}
                 ]">
			        <el-input v-model="inputForm.sort" placeholder="请填写排序"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="相机距离" prop="multiCameraDis"
                :rules="[
                 ]">
			        <el-input v-model="inputForm.multiCameraDis" placeholder="请填写相机距离"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="旋转角度" prop="multiRotateAngle"
                :rules="[
                 ]">
			        <el-input v-model="inputForm.multiRotateAngle" placeholder="请填写旋转角度"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="多层仰角" prop="multiTiltAngle"
                :rules="[
                 ]">
			        <el-input v-model="inputForm.multiTiltAngle" placeholder="请填写多层仰角"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="多层中心X" prop="centerX"
                :rules="[
                 ]">
			        <el-input v-model="inputForm.centerX" placeholder="请填写多层中心X"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="多层中心Y" prop="centerY"
                :rules="[
                 ]">
			        <el-input v-model="inputForm.centerY" placeholder="请填写多层中心Y"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="角度纠正" prop="angleCorrect"
                :rules="[
                 ]">
              <el-input v-model="inputForm.angleCorrect" placeholder="请填写角度纠正"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12" v-if="hasPermission('smis:system')">
            <el-form-item label="部署距离" prop="deployDis"
                :rules="[
                 ]">
              <el-input v-model="inputForm.deployDis" placeholder="请填写部署距离(英尺)"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="坐标经度" prop="longitude"
                :rules="[
                 ]">
              <el-input v-model="inputForm.longitude" placeholder="请填写坐标longitude"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="坐标纬度" prop="latitude"
                :rules="[
                 ]">
              <el-input v-model="inputForm.latitude" placeholder="请填写坐标latitude"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="22" v-if="hasPermission('smis:system')">
          <el-form-item label="GPS定位" prop="gpsEnabled"
                  :rules="[
                 ]">
            <el-radio-group v-model="inputForm.gpsEnabled">
              <el-radio v-for="item in this.$dictUtils.getDictList('switch')" :label="item.value" :key="item.id">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="inputForm.gpsEnabled == '1' && hasPermission('smis:system')">
            <el-form-item label="本地坐标A" prop="localA"
                :rules="[
                 ]">
              <el-input v-model="inputForm.localA" placeholder="{x: -4428.95,y: -4569.16}"></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12" v-if="inputForm.gpsEnabled == '1'&& hasPermission('smis:system')">
            <el-form-item label="高德坐标A" prop="gpsA"
                :rules="[
                 ]">
              <el-input v-model="inputForm.gpsA" placeholder="{longitude: 120.525, latitude: 30.08}"></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12" v-if="inputForm.gpsEnabled == '1'&& hasPermission('smis:system')">
            <el-form-item label="本地坐标B" prop="localB"
                :rules="[
                 ]">
              <el-input v-model="inputForm.localB" placeholder="{x: -4428.95,y: -4569.16}"></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12" v-if="inputForm.gpsEnabled == '1'&& hasPermission('smis:system')">
            <el-form-item label="高德坐标B" prop="gpsB"
                :rules="[
                 ]">
              <el-input v-model="inputForm.gpsB" placeholder="{longitude: 120.525, latitude: 30.08}"></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="24" v-if="inputForm.gpsEnabled == '1'&& hasPermission('smis:system')">
            <el-form-item label="坐标围栏" prop="fenceList"
                :rules="[
                 ]">
			        <el-input type="textarea" rows="4" v-model="inputForm.fenceList" placeholder="[{longitude: 120.520495,latitude: 30.083811},
{longitude: 120.520688,latitude: 30.078891},
{longitude: 120.526996,latitude: 30.078891},
{longitude: 120.528155,latitude: 30.084443}]"   ></el-input>
           </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  import SelectTree from '@/components/treeSelect/treeSelect.vue'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          id: '',
          parent: {
            id: ''
          },
          name: '',
          sort: '',
          angleCorrect: '',
          deployDis: '',
          multiCameraDis: '',
          multiRotateAngle: '',
          multiTiltAngle: '',
          centerX: '',
          centerY: '',
          longitude: '',
          latitude: '',
          gpsEnabled: '1', // 是否开启融合定位
          localA: '',
          localB: '',
          gpsA: '',
          gpsB: '',
          fenceList: '',
          ext: ''
        }
      }
    },
    components: {
      SelectTree
    },
    methods: {
      init (method, obj) {
        this.method = method
        this.inputForm.id = obj.id
        if (method === 'add') {
          this.title = '新建楼宇'
        } else if (method === 'addChild') {
          this.title = '添加下级楼宇'
        } else if (method === 'edit') {
          this.title = '修改楼宇'
        } else if (method === 'view') {
          this.title = '查看楼宇'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          this.inputForm.parent.id = obj.parent.id
          this.inputForm.parent.name = obj.parent.name
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/smis/floor/jfBuilding/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.jfBuilding)
              this.loading = false
              if(this.inputForm.ext && this.inputForm.ext!= '') {
                var ext = JSON.parse(this.inputForm.ext);
                for(var key in ext) {
                  if(ext[key] instanceof Array || ext[key] instanceof Object ) {
                    this.inputForm[key] = JSON.stringify(ext[key]);
                  } else {
                    this.inputForm[key] = ext[key];
                  }
                }
              }
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        var ext = {
          gpsEnabled: this.inputForm.gpsEnabled, // 是否开启融合定位
          localA: this.inputForm.localA == '' ? '': JSON.parse(this.inputForm.localA),
          localB: this.inputForm.localB == '' ? '': JSON.parse(this.inputForm.localB),
          gpsA: this.inputForm.gpsA == '' ? '': JSON.parse(this.inputForm.gpsA),
          gpsB: this.inputForm.gpsB == '' ? '': JSON.parse(this.inputForm.gpsB),
          fenceList: this.inputForm.fenceList == '' ? '': JSON.parse(this.inputForm.fenceList),
        }
        this.inputForm.ext = JSON.stringify(ext);
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/smis/floor/jfBuilding/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshTree')
              }
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>
